React Tableで行を選択する
React Tableを使ってみる調査の一環
行の選択機能を実装してみる
参考にするところ
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection
変更点
Mock dataの構造を単純にする
列のネストをなくす
check boxではなく、行のhighlightで選択を表す
18:44:04
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/jolly-sun-pu98b
React TableでCRUDを実装してみるのsandboxをforkした
18:48:29 check box用の列をつくる関数をuseTableの引数にあとづけて渡しているみたい
19:10:09 関数の詳細はここ
React.forwardRefというものを使っている
なんだろうこれ?takker.icon
useRef()をcomponentの外で使えるようにする関数みたい
19:01:01 かいた
React Hooks#5fbb881d1280f000007a633d
19:03:02 ん?でも外部からrefを作ってcomponentに渡してないぞ
19:11:36 API referenceを見てみたけど、関数からrefが渡されることはない
てことはReact.forwardRef必要ないな
あと HTMLInputElement.indeterminateってなんだ?
19:10:19 調べた
19:12:29 移植開始
19:12:58 <table>部分は変えなくていいみたい
選択内容をjsonで表示する部分だけコピーする
19:15:30 check boxの代わりにclickできるbuttonを置いておく
SelectButtonにする
TableToggleAllRowsSelectedPropsはcheck boxが前提のpropsみたい
まあ変換すれば他のcomponentにも渡せるけど
19:22:02 いやまて。on/offを保持するのだから、check boxでないとだめか?
styleを変えればcheck boxでもいける?
それとも自前でcomponentを作る?
19:45:34 作るの断念した
どうしても<div>を要素いっぱいにまで大きくできない
19:48:37 見つけた
https://qiita.com/matsui-a/items/9de76659429593ed7a88#css-親要素いっぱい領域を広げる
これだと親の<td>/<th>も設定しないといけないのか……
E:first-of-typeが使えるか?
19:52:19 使えた。できた
https://gyazo.com/e3d9ae9890df6923436c3a3f9a99b185
19:52:31 onclickを生やす
20:06:02 <tr>の段階で選択されているかどうか取得するにはどうすればいい
二重管理は避けたいので、useTableが渡す変数だけでなんとかしたい
theadを無視するなら、selectedRowIdsとmapの通し番号から検索できそう
20:20:41 できた
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/jolly-sun-pu98b
sub rowがない場合は、idに番号がそのまま入るみたい
sub rowがあるときは0.1みたいになる
20:21:34 選択行を削除できるようにしてみる
20:54:38 できた。が、値の更新で警告が出る
良くないuseMemo()の使い方をしているみたい
これは後で状態を親に伝える方法を調べ直したほうがよさそう
まだよくわかっていないみたいだ
もしくは、<div>をクリックしたタイミングで更新?
無理そうだったのでコードを削除した
#2020-11-23 18:44:29